<template>
  <div class="mapBox">
    <div class="header">
      <div class="l1" @click="backTo">
        <span class="icon"></span>
        <span>返回</span>
      </div>
      <div class="r1"> 地震应急指挥技术平台 </div>
      <div class="title">{{ earthQuakeInfo.macroscopic }}{{ earthQuakeInfo.shockLevel }}级地震</div>
    </div>
    <div class="content">
      <div class="leftbox">
        <div class="l-1"> {{ earthQuakeInfo.causeDisaster || '暂无描述' }} </div>
        <div class="l-2">
          <leftone ref="left1" />
        </div>
        <div class="l-3">
          <lefttwo ref="left2" />
        </div>
        <div class="l-4">
          <leftthree ref="left3" />
        </div>
      </div>
      <div class="centerbox">
        <centers ref="center" />
      </div>
      <div class="rightbox">
        <div class="l-1">
          <rightone ref="right1" />
        </div>
        <div class="l-2">
          <righttwo ref="right2" />
        </div>
        <div class="l-3">
          <rightthree ref="right3" />
        </div>
      </div>
    </div>
  </div>
</template> 
    <script setup>
import { onMounted, ref, reactive, watch, provide } from 'vue'
import topCom from '../layer/header.vue'
import leftone from './index2/leftone.vue'
import lefttwo from './index2/lefttwo.vue'
import leftthree from './index2/leftthree.vue'
import rightone from './index2/rightone.vue'
import righttwo from './index2/righttwo.vue'
import rightthree from './index2/rightthree.vue'
import centers from './index2/center.vue'
import { useRoute, useRouter } from 'vue-router'
import { getListHistoryQuakeForBigScreen } from '../api/earthquake'
import dayjs from 'dayjs'
import {
  getListHistoryQuakeForBigScreenChart,
  getlistHistoryQuakeFromId2Uid,
  getListDataHistoricalIntensityByThreeData,
  getOldListHistoryQuakeForBigScreenChart,
  getListHistoryQuakeForBigScreenImgFile
} from '../api/bigscreen'

const route = useRoute()
const router = useRouter()
var data = JSON.parse(route.query.data)

const earthQuakeInfo = ref({})
const left1 = ref(null)
const left2 = ref(null)
const left3 = ref(null)
const right1 = ref(null)
const right2 = ref(null)
const right3 = ref(null)
const center = ref(null)

const LMToNum = (str) => {
  var num = ''
  switch (str) {
    case 'Ⅰ':
      num = '一'
      break
    case 'Ⅱ':
      num = '二'
      break
    case 'Ⅲ':
      num = '三'
      break
    case 'Ⅳ':
      num = '四'
      break
    case 'Ⅴ':
      num = '五'
      break
    case 'Ⅵ':
      num = '六'
      break
    case 'Ⅶ':
      num = '七'
      break
    case 'Ⅷ':
      num = '八'
      break
    case 'Ⅸ':
      num = '九'
      break
    case 'Ⅹ':
      num = '十'
      break
       case 'Ⅺ':
      num = '十一'
      break
    default:
      break
  }
  return num
}

const LMToNumT = (str)=>{
  var num = ''
  switch (str) {
    case 'Ⅰ':
      num = 1
      break
    case 'Ⅱ':
      num = 2
      break
    case 'Ⅲ':
      num = 3
      break
    case 'Ⅳ':
      num = 4
      break
    case 'Ⅴ':
      num = 5
      break
    case 'Ⅵ':
      num = 6
      break
    case 'Ⅶ':
      num = 7
      break
    case 'Ⅷ':
      num =8
      break
    case 'Ⅸ':
      num = 9
      break
    case 'Ⅹ':
      num = 10
      break
    case 'Ⅺ':
      num = 11
      break
   
    default:
      break
  }
  return num
}

//图表数据
const getList = () => {
  getOldListHistoryQuakeForBigScreenChart({ id:  data.id }).then((e) => {
    var data = e.HistoryIntensityGdpPopArea
    var pop = []
    var xdata = []
    var area = []
    var gdp = []

    for (const item of data) {
      xdata.push(LMToNum(item.intensity) + '度区')
      pop.push(item.population)
      area.push(item.area)
      gdp.push(item.gdp)
    }
    left1.value.getData(pop, xdata)
    left2.value.getData(gdp, xdata)
    right1.value.getData(area, xdata)
  })
}

//烈度图
const getLdt = () => {
  var obj = earthQuakeInfo.value
  const format = 'YYYYMMDD HH:mm:ss'

  var params = {
    earthquakeDate: `${obj.seismDate} ${obj.h}:${obj.m}:${obj.s}`,
    longitude: obj.lon,
    latitude: obj.lat,
    magnitude: obj.shockLevel
    // earthquakeDate: `20010223 8:9:20`,
    // longitude:101.1||obj.lon,
    // latitude:29.42||obj.lat,
    // magnitude:6||obj.shockLevel
  }
  params.earthquakeDate = dayjs(params.earthquakeDate).format(format)
  getListDataHistoricalIntensityByThreeData(params).then((e) => {
    var str = '';
    var index = 0;
    for (const item of e) {
      item.num = LMToNumT(item.intensity);
    }
    e.sort((a,b)=> b.num - a.num)
    for (const element of e) {
      str += `${element.notes} <br/>`
      // str += `${element.macroscopicEpicenter}烈度级别为${element.intensity}度，烈度范围为${element.area}公里，震源深度为${element.sourceDepth}公里，烈度圈所在位置为东经${element.epicenterLongitude},北纬${element.epicenterLatitude}。<br/>`
      index++
    }
    center.value.getDatas(e)
    right3.value.getDatas(str)
  })
}

// 图片
const getLdtImg = () => {
  var obj = earthQuakeInfo.value
  const format = 'YYYYMMDD HH:mm:ss'
  var params = {
    earthquakeDate: `${obj.seismDate} ${obj.h}:${obj.m}:${obj.s}`,
    longitude: obj.lon,
    latitude: obj.lat,
    magnitude: obj.shockLevel
  }
  params.earthquakeDate = dayjs(params.earthquakeDate).format(format)
  getListHistoryQuakeForBigScreenImgFile(params).then((e) => {
    right2.value.getData(e)
  })
}
onMounted(async () => {
  getListHistoryQuakeForBigScreen({ id: data.id }).then((e) => {
    earthQuakeInfo.value = e[0]
    center.value.getData(e[0])
    left3.value.getData(e[0])
    getList()
    getLdt()
    getLdtImg()
  })
})

const backTo = () => {
  router.go(-1)
}
</script>
    <style lang="scss" scoped>
.mapBox {
  width: 100vw;
  height: 100vh;
  background-image: url(/static/assets/chartbg.png);
}

.header {
  width: 100%;
  height: 8.611111vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  background-image: url(/static/assets/charth.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  .l1 {
    width: 92px;
    height: 36px;
    background-image: url(/static/assets/tbtn.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    right: 1.04166vw;
    top: 0.9259vh;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #01c2ff;
    line-height: 24px;
    cursor: pointer;
    .icon {
      width: 24px;
      height: 24px;
      background-image: url(/static/assets/ow.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin: 0 8px 0 16px;
    }
  }
  .r1 {
    position: absolute;
    left: 1.04166vw;
    top: 1.85185vh;
    font-size: 2.22222vh;
    font-weight: bold;
    line-height: 2.96296vh;
    letter-spacing: 0px;
    color: rgba(255, 255, 255, 0.87);
    text-shadow: 0px 0px 13px rgba(27, 126, 242, 0.91);
  }
  .title {
    height: 100%;
    font-size: 4.8148vh;
    font-weight: bold;
    text-align: center;
    letter-spacing: 5.67px;
    background: linear-gradient(0deg, #87daff 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-style: italic;
  }
}
.content {
  height: calc(100% - 8.611111vh);
  padding: 0 10px 10px 10px;
  box-sizing: border-box;
  display: flex;

  .leftbox {
    width: 23.89%;
    height: 100%;
    box-sizing: border-box;
    .l-1 {
      height: 12.4074vh;
      background-image: url(/static/assets/l1.png);
      background-size: 100% 100%;
      padding: 10px 15px;
      box-sizing: border-box;
      color: #fff;
      font-size: 18px;
      font-weight: bold;
      font-size: 2.2222vh;
      color: #ffffff;
      // display: flex;
      // align-items: center;
      // padding: 0.5vh 1vw;
      overflow: auto;

      // 滚动条整体部分
      &::-webkit-scrollbar {
        width: 6px;
        height: 8px;
      }
      &::-webkit-scrollbar-button {
        display: none;
      }
      &::-webkit-scrollbar-thumb {
        background: #01c2ff;
        cursor: pointer;
        border-radius: 4px;
      }
      &::-webkit-scrollbar-corner {
        display: none;
      }
      &::-webkit-resizer {
        display: none;
      }
    }
    .l-2,
    .l-3,
    .l-4 {
      height: calc(33.33% - 10px - (12.4074vh / 3));
      background-image: url(/static/assets/c271.png);
      background-repeat: no-repeat;
    }
    .l-2,
    .l-3,
    .l-4 {
      margin-top: 10px;
    }
  }

  .rightbox {
    width: 23.89%;
    height: 100%;
    box-sizing: border-box;
    .l-1 {
      height: 22.4074vh;
      background-image: url(/static/assets/c242.png);
      background-repeat: no-repeat;
    }
    .l-2,
    .l-3 {
      height: calc(50% - 10px - (22.4074vh / 2));
      background-image: url(/static/assets/c356.png);
      background-repeat: no-repeat;
      margin-top: 10px;
    }
  }
  .centerbox {
    width: 52.22%;
    height: 100%;
  }
}
</style>
    
    